<%--
  Created by IntelliJ IDEA.
  User: UP
  Date: 2024/7/30
  Time: 8:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<c:set value="${sessionScope.get('watchVO')}" var="watchVO"/>
<c:set value="${sessionScope.get('op')}" var="op"/>
<c:set value="${sessionScope.get('statue')}" var="statue"/>
<c:set value="${sessionScope.watchStr}" var="watchVOStr"/>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提现详情</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f0f0f0;
        }

        .withdrawal-details {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin: 0 auto;
            max-width: 600px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .withdrawal-details .title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }

        .info {
            margin-bottom: 20px;
        }

        .info-item {
            margin-bottom: 10px;
        }

        .info-item label {
            font-weight: bold;
        }

        .info-item span {
            margin-left: 10px;
        }

        #daKuan, #juJue ,#daKuanShow,#juJueShow{
            display: none;
            margin-top: 20px;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }


        #daKuan input[type="file"] {
            margin-top: 10px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        #juJue textarea ,#juJueShow textarea{
            width: 40%;
            min-height: 100px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 16px;
        }
        input{
            border: 0;
            outline: none;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<input type="hidden" id="watchVO" value="${watchStr}">
<input type="hidden" id="withdrawalId" value="${watchVO.id}">
<input type="hidden" id="op" value="${op}">
<input type="hidden" id="statue" value="${statue}">
<div class="withdrawal-details">
    <div class="title">提现详情</div>
    <div class="info">
        <div class="info-item">
            <label>提现流水号：</label><input id="flowNo" type="text" value="${watchVO.flowNo}" readonly/><br>
            <fmt:formatDate value="${watchVO.createTime}" pattern="yyyy-MM-dd HH:mm:ss" var="createTime"/>
            <label>提现申请时间：</label> <input id="createTime" type="text" value="${createTime}" readonly/>
        </div>
        <div class="info-item">
            <label>提现客户：<input id="userName" type="text" value="${watchVO.userName}" readonly/></label><br>
            <label>客户联系方式：</label><input id="telNumber" type="text" value="${watchVO.telNumber}" readonly/>
        </div>
    </div>
    <div class="info">
        <div class="info-item">
            <label>到账银行：</label><input id="bankName" type="text" value="${watchVO.bankName}" readonly/><br>
            <label>银行卡号：</label><input id="cardNo" type="text" value="${watchVO.cardNo}" readonly/>
        </div>
        <div class="info-item">
            <label>持卡人姓名：</label><input id="accountHolderName" type="text" value="${watchVO.accountHolderName}" readonly/><br>
            <label>预留手机号：</label><input id="reservePhoneNumber" type="text" value="${watchVO.reservePhoneNumber}" readonly/>
        </div>
    </div>
    <div>
        <label>提现金额：</label><input id="amount" type="text" value="${watchVO.amount}" readonly/>
    </div>
</div>
<div id="daKuan">
    <div>打款凭证</div>
    <p>上传打款凭证 <input type="file"  id="file" placeholder="上传凭证" onchange="showImg()"></p>
    <div>
        <img alt="图片预览" id="img_file" height=150px  width=100px style="display: none">
    </div>
    <button onclick="daKuanSave()"> 确认保存</button>
</div>
<div id="juJue">
    <div>审批拒绝</div>
    <p>拒绝理由：<textarea id="disAgreeReason" placeholder="请输入拒绝理由"></textarea></p>
    <button onclick="juJueSave()">确认保存</button>
</div>
<div id="daKuanShow">
    <div>打款凭证</div>
    <img src="${watchVO.voucher}" height="150px" width="100px" >
    <button onclick="history.back()"> 返回</button>
</div>
<div id="juJueShow">
    <div>审批拒绝</div>
    <p>拒绝理由：<textarea id="juJueShowReason" placeholder="请输入拒绝理由" readonly>${watchVO.refuse}</textarea></p>
    <button onclick="history.back()">返回</button>
</div>

</body>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
    $(function () {
        setOp();
    })
    function showImg(){
        $("#img_file").hide();
        let file = $("#file")[0].files[0];
        let formData = new FormData();
        formData.append("file",file);

        $.ajax({
            url:"${contextPath}/fileUpload/imgShow",
            method:'post',
            data:formData,
            processData:false,
            contentType:false,
            dataType:'json',
            success(res){
                if (res.code ===0){
                    console.log(res.data);
                    $("#img_file").attr("src","${contextPath}/upload/"+res.data);
                    // document.getElementById("img_file").src=res.data;
                    $("#img_file").show();
                }else {
                    alert(res.msg);
                }
            }
        })


    }

    function formatDate(dateString) {
        const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        let dateParts = dateString.split(' ');
        let month = months.indexOf(dateParts[1]) + 1;
        let day = dateParts[2];
        let year = dateParts[4];
        let time = dateParts[3];

        let formattedDate = new Date(`${year}-${month}-${day}T${time}`);
        let formattedTime = formattedDate.toLocaleString('en-US', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        });

        return formattedTime;
    }

    function daKuanSave() {
        let voucher = document.getElementById("img_file").src;
        console.log(voucher);
        $.ajax({
            url: '${contextPath}/account/updateWatch',
            method: 'post',
            data: {
                id: $("#withdrawalId").val(),
                flowNo: $("#flowNo").val(),
                amount: $("#amount").val(),
                createTime: $("#createTime").val(),
                // successTime: $("#successTime").val(),
                userName: $("#userName").val(),
                telNumber: $("#telNumber").val(),
                bankName: $("#bankName").val(),
                cardType: $("#cardType").val(),
                cardNo: $("#cardNo").val(),
                voucher:voucher,
                status: 1,

            },
            dataType: 'json',
            success(res) {
                if (res.code === 0) {
                    alert("处理完成");
                    location.href = "../../list.jsp"
                }
            }
        })


    }

    function juJueSave() {

        let refuse = $("#disAgreeReason").val();
        $.ajax({
            url: '${contextPath}/account/updateWatch',
            method: 'post',
            data: {
                id: $("#withdrawalId").val(),
                flowNo: $("#flowNo").val(),
                amount: $("#amount").val(),
                createTime: $("#createTime").val(),
                // successTime: $("#successTime").val(),
                userName: $("#userName").val(),
                telNumber: $("#telNumber").val(),
                bankName: $("#bankName").val(),
                cardType: $("#cardType").val(),
                cardNo: $("#cardNo").val(),
                status: 2,
                refuse: refuse,
            },
            dataType: 'json',
            success(res) {
                if (res.code === 0) {
                    alert("处理完成");
                    location.href = "../../list.jsp"
                }
            }
        })
    }

    function setOp() {
        let opVal = $("#op").val();
        let statue = $("#statue").val();
        console.log(typeof statue);

        if ("agree" === opVal) {
            $("#juJue").hide();
            $("#daKuan").show();
        } else if ("disAgree" === opVal) {
            $("#juJue").show();
            $("#daKuan").hide();
        } else if ("watch" === opVal) {
            if (statue === '1') {
                $("#daKuanShow").show();
                $("#juJueShow").hide();
            } else if (statue === '2') {
                $("#daKuanShow").hide();
                $("#juJueShow").show();
            }

        }
    }
</script>
</html>

